import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

class CustomDrawPath extends StatefulWidget {
  @override
  _CustomDrawPathState createState() => _CustomDrawPathState();
}

class _CustomDrawPathState extends State<CustomDrawPath> {
  final ValueNotifier colorNumCtrl = ValueNotifier(0);
  Timer? timer;
  int num = 0;

  @override
  void initState() {
    // TODO: implement initState
    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      print('object');
      int cNum = Random().nextInt(Colors.primaries.length);

      if (cNum == num && cNum == 0) {
        cNum += 1;
      } else if (cNum == num && cNum == Colors.primaries.length) {
        cNum -= 1;
      }
      colorNumCtrl.value = cNum;
    });
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('custom draw path'),
      ),
      body: LayoutBuilder(
        builder: (ctx, size) {
          return Column(
            children: [
              ClipPath(
                clipper: MyClipper(),
                child: Container(
                  height: 320,
                  color: Colors.red,
                ),
              )
            ],
          );
          //   Stack(
          //   children: [
          //     Center(
          //       child: Text('模板'),
          //     ),
          //     Positioned(
          //         left: 0,
          //         right: 0,
          //         bottom: 0,
          //         top: size.maxHeight * (2 / 5),
          //         child:
          //         ListenableBuilder(
          //           listenable: colorNumCtrl,
          //           builder: (BuildContext context, Widget? child) {
          //             return AnimatedContainer(
          //               duration: const Duration(milliseconds: 1000),
          //               decoration: BoxDecoration(
          //                 border: Border(
          //                   top: BorderSide(
          //                     color: Colors.primaries[colorNumCtrl.value],
          //                   ),
          //                 ),
          //                 color: Colors.primaries[colorNumCtrl.value]
          //                     .withOpacity(0.1),
          //               ),
          //             );
          //           },
          //         ),
          //         )
          //     // Path(),
          //   ],
          // );
        },
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  // todo: 重新定义好数值，然后用动画的方式改变一个数值，让动画动起来
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height - 60);
    // TODO: implement getClip
    /// P1
    var firstStartPoint = Offset(size.width / 4, size.height);

    var firstEndPoint = Offset(size.width / 2, size.height - 60);

    /// 绘制贝塞尔曲线
    path.quadraticBezierTo(firstStartPoint.dx, firstStartPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);

    /// P2
    var secondStartPoint = Offset(size.width / 1.3, size.height - 120);
    var secondEndPoint = Offset(size.width, size.height - 60);

    /// 绘制贝塞尔曲线
    path.quadraticBezierTo(secondStartPoint.dx, secondStartPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);

    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    return path;
  }

  //
  // Path getClip(Size size) {
  //   Path path = Path();
  //   path.lineTo(0, 0);
  //   path.lineTo(0, size.height - 60);
  //   // TODO: implement getClip
  //   var firstControlPoint = Offset(size.width / 4, size.height);
  //   var firstendPoint = Offset(size.width / 2.25, size.height - 30);
  //   path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
  //       firstendPoint.dx, firstendPoint.dy);
  //
  //   var secondConttorPoint = Offset(size.width / 4 * 3, size.height - 90);
  //   var secondendPoint = Offset(size.width, size.height - 40);
  //   path.quadraticBezierTo(secondConttorPoint.dx, secondConttorPoint.dy,
  //       secondendPoint.dx, secondendPoint.dy);
  //
  //   path.lineTo(size.width, size.height - 40);
  //   path.lineTo(size.width, 0);
  //   return path;
  // }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}
